<template>
    <div class="pieChart">
        <div ref="pieChart" :style="customStyle"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    
    export default {
        name: 'pieChart',
        data() {
            return {
                myChart: null,
            };
        },
        mounted(){
            this.myChart = echarts.init(this.$refs.pieChart);
            this.initData();
            window.addEventListener('resize', this.resizeChart); // 处理窗口缩放
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.resizeChart); // 清理事件监听
        },
        props: ['pieData', 'customStyle', 'showLegend', 'totalValue', 'seriesName'],
        methods: {
            initData(){
                const option = {
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        show: this.showLegend,
                        orient: 'vertical', // 水平排列
                        right: 10,           // 设置图例放在底部
                        left: 'right',       // 水平居中
                        data: this.pieData.map(item => item.name)
                    },
                    series : [
                        {
                            name: this.seriesName || '总利润',
                            type: 'pie',
                            // radius : '80%',
                            radius: ['45%', '80%'],
                            // center: ['50%', '60%'],
                            data: this.pieData,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ],
                    // 使用 graphic 在中心显示文本
                    graphic: {
                        elements: [
                            {
                                type: 'text',
                                left: 'center',
                                top: 'center',
                                style: {
                                    text: this.totalValue?`总额\n\n￥${this.totalValue}`:'', // 在这里设置显示的文本内容
                                    font: 'bold 15px sans-serif', // 设置字体样式
                                    textAlign: 'center',
                                    fill: '#333' // 设置文本颜色
                                }
                            }
                        ]
                    }
                };

                this.myChart.setOption(option);
            },
            resizeChart() {
                const chartInstance = echarts.getInstanceByDom(this.$refs.pieChart);
                if (chartInstance) {
                    chartInstance.resize();
                }
            }
        },
        watch: {
            pieData: function (){
                this.initData()
            }
        }
    }
</script>

<style scoped>
    .pieChart{
        display: flex;
        justify-content: center;
        margin-top: 20px;

    }
</style>
